<template>
  <div class="distribution-about">
    <div class="distribution-about-header">概览</div>
    <el-row :gutter="20">
      <el-col v-for="(item,index) in listData" :key="index" :span="6">
        <div :class="{active: active === item.kind}" class="grid">
          <div class="grid-tip">
            <el-tooltip :content="item.tooltip" effect="dark" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </div>
          <p class="grid-title">{{ item.title }}</p>
          <p class="grid-number">{{ item.number }}</p>
          <p class="grid-total">{{ item.totalContent }}:{{ item.total }}</p>
        </div>
      </el-col>
    </el-row>
    <div class="distribution-about-header">数据展示</div>
    <div class="search-wrap">
      <el-date-picker
        :picker-options="pickerOptions"
        v-model="searchDate"
        type="daterange"
        align="center"
        unlink-panels
        range-separator="|"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="selectDate"
      />
    </div>
    <line-chart :date-array="dateArray" :data-array="dataArray" width="100%" height="450px" class-name="line-chart"/>
  </div>
</template>

<script>
import LineChart from '@/components/Charts/lineMarker'
import { getAboutPageData } from '@/api/distribution/about'
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    LineChart
  },
  data() {
    return {
      active: 'user',
      searchDate: [],
      newUserNum: 0,
      userAmount: 0,
      newOrdersNum: 0,
      ordersAmount: 0,
      newOrdersPrice: 0,
      ordersPriceAmount: 0,
      newAward: 0,
      awardAmount: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dataArray: [],
      dateArray: [],
      listData: [],
      options: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [''],
          right: '1%',
          textStyle: {
            fontSize: 14,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 50,
          left: 0,
          right: '1%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#8a8a8a'
            }
          },
          // data: this.dateArray
          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
        }],
        yAxis: [{
          type: 'value',
          name: '',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              // color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              show: false,
              color: '#8a8a8a'
            }
          }
        }],
        series: [
          {
            name: '统计',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            // data: this.dataArray
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
          }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {}
      if (this.searchDate) {
        params.startDate = this.searchDate[0]
        params.endDate = this.searchDate[1]
      }
      params.tenantId = getTenantId()
      getAboutPageData(params).then(res => {
        this.newUserNum = res.data.newUserNum
        this.userAmount = res.data.userAmount
        this.newOrdersNum = res.data.newOrdersNum
        this.ordersAmount = res.data.ordersAmount
        this.newOrdersPrice = res.data.newOrdersPrice
        this.ordersPriceAmount = res.data.ordersPriceAmount
        this.newAward = res.data.newAward
        this.awardAmount = res.data.awardAmount
        this.dataArray = res.data.dataArray
        this.dateArray = res.data.dateArray
        this.initListData()
      })
    },
    selectDate(val) {
      this.getData()
    },
    initListData() {
      this.listData = [
        {
          number: this.newUserNum,
          title: '昨日新增用户数',
          totalContent: '用户总数',
          total: this.userAmount,
          kind: 'user',
          tooltip: '通过分销平台注册的用户数。'
        },
        {
          number: this.newOrdersNum,
          title: '昨日新增交易笔数',
          totalContent: '总交易笔数',
          total: this.ordersAmount,
          kind: 'dealNum',
          tooltip: '通过分销平台活动产生的新增交易。'
        },
        {
          number: this.newOrdersPrice,
          title: '昨日新增交易额',
          totalContent: '总交易额',
          total: this.ordersPriceAmount,
          kind: 'dealTotal',
          tooltip: '通过分销平台活动产生的新增交易额。'
        },
        {
          number: this.newAward,
          title: '昨日新增奖励',
          totalContent: '总奖励',
          total: this.awardAmount,
          kind: 'award',
          tooltip: '分销平台给予代理商的总奖励金额,只有交易成功的订单才会进行分成奖励。'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.distribution-about {
  &-header {
    font-size: 18px;
    color: rgb(52, 172, 228);
    padding: 15px;
    background: #ebf4ff;
    margin-top: 20px;
  }
  .el-row {
    padding: 0 20px;
    margin-top: 10px;
  }
  .line-chart {
    padding: 0 20px;
    margin-top: 20px;
  }
  .search-wrap {
    padding: 10px 20px;
  }
  .grid {
    height: 125px;
    width: 100%;
    margin-top: 5px;
    background: #fff;
    border-radius: 4px;
    min-width: 240px;
    text-align: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    position: relative;
    p {
      margin: 5px;
      color: #aaa;
    }
    &-tip {
      position: absolute;
      right: 5px;
      top: 5px;
      color: #aaa;
    }
    &-title {
      font-size: 16px;
      line-height: 1;
    }
    &-number {
      font-size: 28px;
      line-height: 1.2;
    }
    &-total {
      font-size: 14px;
      line-height: 1;
    }
  }
  .grid:hover {
    cursor: pointer;
    box-shadow: 0 0 10px 0 #409eff;
    p {
      color: #409eff;
    }
  }
  .active {
    cursor: pointer;
    box-shadow: 0 0 10px 0 #409eff;
    p {
      color: #409eff;
    }
  }
}
</style>
